<template>
  <div>
    <van-nav-bar
        title="订单明细"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        z-index="9999"
    />
    <div id="showMap"  style="margin-top: -160px;z-index: 1"></div>
    <div style=" width: 100%;height: 600px;background-color: aqua ">
      <span>订单结束</span><br/>
      <span>订单编号:{{order.orderInformation.orderId}}</span><br/>
      <span>到达时间:{{order.orderTime.destinationTime}}</span><br/>
      <span>出发地:{{order.orderInformation.startingPointAddress}}</span><br/>
      <span>目的地:{{order.orderInformation.destinationAddress}}</span><br/>
      <div style="text-align: left;margin-top: 5px;">
        <img :src=this.driver.driverImgurl alt="" style="width: 100px;height: 100px;border-radius: 100px; margin-left: 20px;" >
        <div style="float: right;margin-right: 100px;margin-top: 20px;">
          <span style="font-weight: bolder">{{this.driver.driverName}}</span>
          <br/>
          <span>
           <van-rate v-model="this.driver.driverPoint" readonly/><span style="color: red">{{this.driver.driverPoint+"分"}}</span>
        </span>
        </div>
      </div>
      <div style="width: 100%;height: 100px;text-align: center;color: red">
        <span style="font-size: 60px;line-height: 100px;">${{order.orderCost.orderMoney}}</span>
        <span style="color: #409EFF;margin-left: 10px;" @click="details()">明细></span>
      </div>
      <p><van-rate v-model="driverappraise.driverScore" /></p>
      <van-checkbox-group v-model="pjs" direction="horizontal">
        <van-checkbox name="1" >文明礼貌</van-checkbox>
        <van-checkbox name="2" >爱护车辆</van-checkbox>
        <van-checkbox name="3" >沟通顺畅</van-checkbox>
        <van-checkbox name="4" >守时</van-checkbox>
        <van-checkbox name="5" >爱安静</van-checkbox>
        <van-checkbox name="6" >爱聊天</van-checkbox>
      </van-checkbox-group>
      <div style="margin-top: 15px;">
        <van-button type="info" style="width: 25%;height: 40px;border-radius: 15px;">消息</van-button>
        <van-button type="info" style="width: 25%;height: 40px;margin-left: 15px;border-radius: 15px;" @click="addAppraise()">修改评价</van-button>
        <van-button style="width: 25%;height: 40px;margin-left: 15px;border-radius: 15px;" @click="feedback()">投诉</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import StartIcon from "@/assets/导航起点.png"
import {addAppraise,findAppraise} from "@/components/api/historyorder/historyorder"

export default {
  data() {

    return {
      order:{

      },
      pjs:[],
      driverappraise:{
        id:null,
        orderId:'',
        userId:null,
        driverId:null,
        userScore:null,
        driverScore:null,
        userEvaluationoptions:'',
        driverEvaluationoptions:'',
      },
      driver:{

      },
      val:5,
      map: null,
      driverTime: null,
      driverLong: null,
      // 开始的经纬度
      startLatitudeAndLongitude: "",
      // 结束的经纬度
      endLatitudeAndLongitude: "",
    };
  },
  mounted() {
    this.initAMap();
  },
  unmounted() {
    this.map.destroy();
  },
  created() {
    this.getDriver();
    this.getorder();
    this. findAppraise();
  },


  methods: {

    // 添加司机评价
    addAppraise(){
      // 添加司机评价
      this.driverappraise.orderId=this.order.orderInformation.orderId;
      this.driverappraise.userId=this.order.orderInformation.userId;
      this.driverappraise.driverId=this.driver.id;
      this.driverappraise.driverEvaluationoptions=this.pjs.join(",");
      addAppraise(this.driverappraise).then(res=>{
        if(res.code==200){
          this.$toast.success("评价成功");
          this.$router.push({
            path: '/history',
          });
        }
      })
    },
  // 获取司机评价
    findAppraise(){
      findAppraise(this.order.orderInformation.orderId).then(res=>{
        if(res.code==200){
          this.driverappraise=res.data;
          if(this.driverappraise.driverEvaluationoptions!=null){
            this.pjs=this.driverappraise.driverEvaluationoptions.split(",");
          }

        }
      })
    },
    // 金额详情
    details(){
      this.$router.push({
        path: '/moneyDetails',
        query: {order: this.order}
      })
    },
    // 获取司机信息
    getDriver(){
      this.driver=JSON.parse(localStorage.getItem("personalUser"));
      if(this.driver==null){
        this.$router.push({
          path: '/personalUser'
        })
      }
    },
    //返回
    onClickLeft(){
      this.$router.go(-1);
    },
    // 获取订单信息
    async getorder(){
      this.order=this.$route.query.order;
      this.startLatitudeAndLongitude=this.order.orderInformation.startingPoint;
      this.endLatitudeAndLongitude=this.order.orderInformation.destination;
    },
    //跳转反馈页面
    feedback() {
      this.$router.push({
        path: '/feedback',
        query: {order: this.order}
      })
    },
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: this.$cod,
      };
      let self = this;
      AMapLoader.load({
        key: this.$key, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale","AMap.Geocoder"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
          .then((AMap) => {
                var map = new AMap.Map("showMap", {
                  // 设置地图容器id
                  viewMode: "3D", // 是否为3D地图模式
                  zoom: 11, // 初始化地图级别

                });
                var icon = new AMap.Icon({
                  // 图标尺寸 ===> new AMap.Size(宽, 高)
                  size: new AMap.Size(80, 50),
                  // Icon图片
                  image: StartIcon,
                  // 根据所设置的大小拉伸或压缩图片 ===> new AMap.Size(宽, 高)
                  imageSize: new AMap.Size(50, 50)
                });

                //添加点标记
                var marker = new AMap.Marker({
                  // 在这个里面需要设置偏移度,值应和图标的大小一致,如不设置,则会出现定位点随着地图缩略的变化而变化
                  offset: new AMap.Pixel(-50, -50),
                  icon
                });
                map.add(marker); //添加到地图
                AMap.plugin(
                    ["AMap.ToolBar", "AMap.Driving", "AMap.Polyline", "AMap.Marker","AMap.Text"],
                    function() {
                      //异步同时加载多个插件
                      var toolbar = new AMap.ToolBar();
                      map.addControl(toolbar);
                      var driving = new AMap.Driving({
                        map: map, //驾车路线规划
                      });
                      // var在函数作用外,否则无法调用
                      var startTranse = self.startLatitudeAndLongitude.split(",");
                      var endTranse = self.endLatitudeAndLongitude.split(",");
                      driving.search(
                          // 因地址值用2214.111的经纬度,所以需要格式转换
                          new AMap.LngLat(parseFloat(startTranse[0]), parseFloat(startTranse[1])),
                          new AMap.LngLat(parseFloat(endTranse[0]), parseFloat(endTranse[1])),
                          function(status, result) {
                            if (status === "complete") {
                              console.log("绘制驾车路线完成", result);
                            } else {
                              console.log("获取驾车数据失败：" + result);
                            }
                          }
                      );
                    }
                );
              }
          )
    },
  },
};
</script>

<style scoped>

#showMap{
  width: 100%;
  height: 500px;
}


</style>
